<template>
  <div>
    <daily
      :dailyTime="timeRange"
      :dailyRange="dailyRange"
      :dailyGrade="dailyGrade"
      :system="system"
      :message="message"
    >
      <template slot="title">
        <span>标签日志</span>
      </template>
    </daily>
    <div class="sparklines trendTable">
      <div style="fontsize: 17px">7天内信源失效率走势</div>
      <apexchart
        class="apex-charts"
        height="350"
        type="area"
        dir="ltr"
        :series="splineAreaChart.series"
        :options="splineAreaChart.chartOptions"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import Daily from "@/views/pages/log/Daily";
export default {
  components: { Daily },
  data() {
    return {
      // 7天内信源失效率走势
      splineAreaChart: {
        series: [
          {
            name: "访问",
            data: [900, 190, 290, 190, 300, 100, 111],
          },
          {
            name: "抓取",
            data: [800, 1830, 280, 180, 3030, 100, 831],
          },
          {
            name: "解析",
            data: [730, 90, 2070, 930, 3730, 170, 171],
          },
          {
            name: "入库",
            data: [350, 590, 2500, 150, 3530, 530, 513],
          },
        ],
        chartOptions: {
          legend: {
            show: true,
            position: "top",
            horizontalAlign: "center",
          },
          chart: {
            stacked: false,
            toolbar: {
              show: false,
            },
          },
          dataLabels: {
            enabled: false,
          },
          stroke: {
            curve: "straight",
            width: 3,
          },
          colors: [
            "rgb(84, 112, 198)",
            "rgb(145, 204, 118)",
            "rgb(250, 200, 88)",
            "rgb(238, 102, 102)",
            "rgb(115, 192, 222)",
          ],
          xaxis: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          grid: {
            borderColor: "#f1f1f1",
          },
        },
      },
      //时间范围
      timeRange: {
        time: [
          {
            name: "今天",
            index: 1,
          },
          {
            name: "昨天",
            index: 2,
          },
          {
            name: "3日内",
            index: 3,
          },
        ],
        timeTypeChange: 1,
      },
      //   日志分类
      dailyRange: {
        daily: [
          {
            name: "全部",
            index: 1,
          },
          {
            name: "未标记",
            index: 2,
          },
          {
            name: "标记错误",
            index: 3,
          },
        ],
        dailyTypeChange: 1,
      },
      //日志等级
      dailyGrade: {
        daily: [
          {
            name: "信息",
            index: 1,
          },
          {
            name: "警告",
            index: 2,
          },
          {
            name: "错误",
            index: 3,
          },
        ],
        dailyTypeChange: 1,
      },
      //系统环境
      system: {
        daily: [
          {
            name: "正式",
            index: 1,
          },
          {
            name: "测试",
            index: 2,
          },
        ],
        systemTypeChange: 1,
      },
      //  信源类型
      message: {
        daily: [
          {
            name: "资讯信源",
            index: 1,
          },
          {
            name: "招标信源",
            index: 2,
          },
          {
            name: "政策信源",
            index: 3,
          },
          {
            name: "工商信源",
            index: 4,
          },
          {
            name: "标准信源",
            index: 5,
          },
        ],
        messageTypeChange: 1,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.trendTable {
  div {
    font-size: 17px;
    color: #343a40;
  }
  margin-top: 20px;
  padding-left: 12px;
  padding-right: 12px;
}
</style>